fashion-ssr-vue3/pages/blog/[slug].vue

<script lang='ts' setup>
import { Api } from '@/api/model/url'
import { useCommonStore } from '@/stores/modules/common'
import { Condition } from '@/enums/const-enums'

import { useUserStore } from '@/stores/modules/user'

const { openLoginModal } = useLoginModal()
const userStore = useUserStore()
const { isLogin } = storeToRefs(userStore)

const config = useRuntimeConfig()
const { apiBaseSiteUrl } = config.public

const route = useRoute()
const detail = ref<any>({})
const tabValue = ref('blog')
const isHasCatalogue = ref(true)

const options = ref([
  {
    label: 'Read Blog',
    value: 'blog',
  },
  {
    label: 'Preview Catalog',
    value: 'catalog',
  },

])
const slug = route.params.slug
const { data, pending, error, refresh } = await useAsyncData(
  'blog-detail',
  () =>
    $fetch(`${apiBaseSiteUrl}${Api.BlogDetail}`, { params: { slug } }),
)
const seoData = data.value?.result
// 把createTime和updateTime转换为ISO格式
if (seoData?.createTime)
  seoData.createTime = new Date(seoData.createTime).toISOString()

if (seoData?.updateTime)
  seoData.updateTime = new Date(seoData.updateTime).toISOString()
if (!seoData?.relatedCatalogue)
  isHasCatalogue.value = false
detail.value = seoData
useHead({
  title: detail.value?.metaTitle,
  meta: [
    {
      name: 'description',
      content: detail.value?.metaDescribe,
    },
    {
      property: 'og:title',
      content: detail.value?.metaTitle,
    },
    {
      property: 'og:description',
      content: detail.value?.metaDescribe,
    },
    {
      property: 'og:image',
      content: detail.value?.thumbnailUrl,
    },
    {
      property: 'og:url',
      content: `${apiBaseSiteUrl}/blog/${slug}`,
    },
    {
      property: 'og:type',
      content: 'website',
    },
    {
      property: 'twitter:title',
      content: detail.value?.metaTitle,
    },
    {
      property: 'twitter:description',
      content: detail.value?.metaDescribe,
    },
    {
      property: 'twitter:site',
      content: `${apiBaseSiteUrl}/blog/${slug}`,
    },
    {
      property: 'twitter:image',
      content: detail.value?.thumbnailUrl,
    },
    {
      property: 'twitter:card',
      content: 'summary_large_image',
    },
  ],
  script: [
    // JSON-LD
    {
      type: 'application/ld+json',
      children: JSON.stringify({
        datePublished: detail.value?.createTime,
        dateModified: detail.value?.updateTime,
      }),
    },
  ],
  link: [
    {
      rel: 'canonical',
      href: `${apiBaseSiteUrl}/blog/${slug}`,
    },
  ],
})

const { openLoginAndDownloadModal } = useLoginAndDownLoadModal()

async function clickLoginAndDownload(item: any) {
  try {
    const commonStore = useCommonStore()
    commonStore.setDownloadCatalog(item)
    const { status } = await openLoginAndDownloadModal()
    if (status)
      location.reload()
  }
  catch (error) {
    console.log(error)
  }
}
</script>

<template>
  <div class="blog-detail">
    <div class="bg-#F3F4FB ">
      <div class="pt-175px pb-110px w-1200-auto flex px-60px">
        <img :src="detail?.thumbnailUrl" :alt="detail?.thumbnailAlt" srcset="" class="w-410px h-256px b-rd-10px object-cover mr-40px">
        <div class="flex-1 text-left">
          <div class="b-rd-400px left-10px text-center w-138px h-32px lh-32px bg-#fff/50 backdrop-blur-20px b-1px b-solid b-#fff/60 text-#9B6CFF text-14px mb-20px">
            {{ detail.category_dictText }}
          </div>
          <h1
            class="!mb-20px fw-800 text-40px ls-2 text-#333 line-clamp-2 lh-50px custom-title-font"
          >
            {{ detail.contentTitle }}
          </h1>
          <div class="text-16px text-#999 lh-24px">
            {{ detail.contentSubhead }}
          </div>
        </div>
      </div>
    </div>
    <div class="w-1200-auto flex pt-30px">
      <div class="w-840px mr-60px">
        <div v-if="isHasCatalogue">
          <el-segmented v-model="tabValue" :options="options">
            <template #default="scope">
              <div>
                <div>{{ scope.item.label }}</div>
              </div>
            </template>
          </el-segmented>
        </div>
        <div v-show="tabValue === 'blog'" class="mt-30px content-detail custom-html" v-html="detail.content" />
        <div v-show="tabValue === 'catalog'" class="mt-30px">
          <iframe
            :src="`${detail?.relatedCatalogue?.viewPdf}#view=FitH&toolbar=0&scrollbar=0&navpanes=0`"
            allowfullscreen
            width="100%"
            height="1200px"
            style="border: none"
          >
            您的浏览器不支持iframe，请使用现代浏览器查看PDF。
          </iframe>
        </div>
      </div>
      <div class="flex-1">
        <div v-if="isHasCatalogue" class="pos-relative mb-40px">
          <img :src="detail?.relatedCatalogue?.coverImg" :alt="detail?.relatedCatalogue?.coverAlt" srcset="" class="w-375px h-240px b-rd-10px object-cover">
          <h4
            class="!mb-15px !mt-30px fw-800 text-24px text-#333 line-clamp-2"
          >
            {{ detail?.relatedCatalogue?.title }}
          </h4>
          <div class="text-14px text-#999 lh-22px line-clamp-2 mb-20px">
            {{ detail?.relatedCatalogue?.subhead }}
          </div>
          <el-button class="!bg-#9B6CFF !text-#fff !b-#9B6CFF !b-rd-380px text-14px fw-bold !h-32px px-20px" @click="clickLoginAndDownload(detail?.relatedCatalogue)">
            {{ detail?.relatedCatalogue?.downloadCondition === Condition.REQUEST ? 'Request' : 'Download' }} Catalog
          </el-button>
        </div>
        <div v-if="!isLogin" class="px-40px pt-34px bg-#E7EAFF b-rd-10px text-center custom-main">
          <div class="text-#333 fw-500">
            Sign in for exclusive trending product catalogs!
          </div>
          <el-button class="mt-20px !bg-#fff !text-#9B6CFF !w-160px !h-40px !b-0px !b-rd-200px" round @click="openLoginModal">
            <span>
              Sign In
            </span>
          </el-button>
        </div>
      </div>
    </div>
    <common-block-blog class="!pb-0" />
    <AppFooter />
  </div>
</template>

<style lang='less' scoped>
 .el-segmented  {
  --el-segmented-item-selected-color: #fff;
  --el-segmented-item-selected-bg-color: #9B6CFF;
  --el-border-radius-base: 16px;
  --el-segmented-bg-color: #F9FAFB;
  --el-segmented-color: #333;
  width: 100%;
  height: 68px;
  line-height: 68px;
  border-radius: 300px!important;
  overflow: hidden;
  padding: 0;
  ::v-deep .el-segmented__group {
    .el-segmented__item-selected,.el-segmented__item{
      border-radius: 300px!important;
      overflow: hidden;
      .el-segmented__item-label{
        font-size: 18px;
      }
    }
  }
}
.blog-detail {
  ::v-deep(.content-detail) {
    font-family: sans-serif;
    h2 {
      font-size: 1.5em;
      font-family: "CustomTitleFont";
      margin-top: 1em !important;
      margin-bottom: 1em !important;
      font-weight: bold;
    }
    h3 {
      display: block;
      font-size: 1.17em;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      margin-bottom: 1em !important;
      font-weight: bold;
      unicode-bidi: isolate;
      font-family: "CustomTitleFont";
    }
    p {
      display: block;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      unicode-bidi: isolate;
    }
    ul {
      display: block;
      list-style-type: disc;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      padding-inline-start: 40px;
      unicode-bidi: isolate;
      li {
        display: list-item;
        text-align: -webkit-match-parent;
        unicode-bidi: isolate;
      }
    }
    ol {
      list-style-type: decimal;
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      padding-inline-start: 40px;
      unicode-bidi: isolate;
    }
  }
}
.custom-main{
  background: url('~/assets/images/swiper_bg.png') no-repeat center center;
  background-size: cover;
  width: 300px;
  height: 190px;
}
</style>